<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

<ui:composition template="/resources/templates/base_template.xhtml">

    <ui:define name="body">

        <p:tabView style="height:500px;">

            <p:tab title="Basic Controls">

                <p:growl id="growl" showDetail="true"/>

                <p:panel header="#{mainController.title}" style="height:400px;">

                    <p:commandButton value="Info" action="#{mainController.addInfoMessage()}" update="growl"/>
                    <p:commandButton value="Error" action="#{mainController.addErrorMessage()}" update="growl"/>

                    <h:panelGrid columns="2" cellspacing="5">

                        <h:outputText value="Selectd Value"/>
                        <h:outputText id="selValue_jsId" value="Ajax Update : #{mainController.selectValue}"/>

                        <h:outputText value="combo standard" style="font-weight: bold;"/>
                        <h:selectOneMenu value="#{mainController.selectValue}" style="width:200px;">
                            <p:ajax event="change" update="selValue_jsId"/>
                            <f:selectItem itemLabel="Select One" itemValue=""/>
                            <f:selectItem itemLabel="Option 1" itemValue="1"/>
                            <f:selectItem itemLabel="Option 2" itemValue="2"/>
                            <f:selectItem itemLabel="Option 3" itemValue="3"/>
                        </h:selectOneMenu>

                        <h:outputText value="Input"/>
                        <p:inputText value="#{mainController.inputString}"/>

                        <h:outputText value="combo PF (problema su IE8)"/>
                        <p:selectOneMenu value="#{mainController.selectValue}" style="width:200px;" effectDuration="10">
                            <f:selectItem itemLabel="Select One" itemValue=""/>
                            <f:selectItem itemLabel="Option 1" itemValue="1"/>
                            <f:selectItem itemLabel="Option 2" itemValue="2"/>
                            <f:selectItem itemLabel="Option 3" itemValue="3"/>
                        </p:selectOneMenu>

                        <h:outputText value="combo disabilitato"/>
                        <p:selectOneMenu value="#{mainController.selectValue}" style="width:200px;" effectDuration="10"
                                         disabled="true">
                            <f:selectItem itemLabel="Select One" itemValue=""/>
                            <f:selectItem itemLabel="Option 1" itemValue="1"/>
                            <f:selectItem itemLabel="Option 2" itemValue="2"/>
                            <f:selectItem itemLabel="Option 3" itemValue="3"/>
                        </p:selectOneMenu>

                    </h:panelGrid>

                </p:panel>

            </p:tab>

            <p:tab title="Checklist demo">

                <p:panel header="Check Test" style="width: 600px;">

                    <p:dataTable value="#{mainController.checkList}" var="check">
                        <p:column headerText="Check">
                            <h:outputText value="#{check.label}"/>
                        </p:column>
                        <p:column headerText="OK">
                            <h:selectBooleanCheckbox value="#{check.ok}"/>
                        </p:column>
                        <p:column headerText="NOK">
                            <h:selectBooleanCheckbox value="#{check.nok}"/>
                        </p:column>
                    </p:dataTable>

                    <p:commandButton value="Submit (Basic)" action="#{mainController.submitCheckPanel}"
                                     update="basicDialog_jsId" oncomplete="basicDialog.show()"/>

                    <p:commandButton value="Submit (Modal)" action="#{mainController.submitCheckPanel}"
                                     update="modalDialog_jsId" oncomplete="modalDialog.show()"/>

                    <p:dialog id="basicDialog_jsId" header="Checklist Results" widgetVar="basicDialog" modal="false">
                        <p:dataTable value="#{mainController.checkList}" var="check">
                            <p:column headerText="Check">
                                <h:outputText value="#{check}"/>
                            </p:column>
                        </p:dataTable>
                    </p:dialog>

                    <p:dialog id="modalDialog_jsId" header="Checklist Results (Modal)" widgetVar="modalDialog"
                              modal="true">
                        <p:dataTable value="#{mainController.checkList}" var="check">
                            <p:column headerText="Check">
                                <h:outputText value="#{check}"/>
                            </p:column>
                        </p:dataTable>
                    </p:dialog>

                </p:panel>

            </p:tab>

            <p:tab title="Accordion test">

                <p:accordionPanel>
                    <p:tab title="First Tab Title">
                        <div style="height:300px">
                            <p>AccordionPanel supports lazy loading of tab content, when dynamic option is set true, only active
                                tab contents will be rendered to the client side and clicking an inactive tab header will do an ajax
                                request to load the tab contents.
                                This feature is useful to reduce bandwidth and speed up page loading time. By default activating a
                                previously loaded dynamic tab does not initiate a request to load the contents again as tab is cached.
                                To control this behavior use cache option.</p>

                            <p>AccordionPanel supports lazy loading of tab content, when dynamic option is set true, only active
                                tab contents will be rendered to the client side and clicking an inactive tab header will do an ajax
                                request to load the tab contents.
                                This feature is useful to reduce bandwidth and speed up page loading time. By default activating a
                                previously loaded dynamic tab does not initiate a request to load the contents again as tab is cached.
                                To control this behavior use cache option.</p>

                            <p>AccordionPanel supports lazy loading of tab content, when dynamic option is set true, only active
                                tab contents will be rendered to the client side and clicking an inactive tab header will do an ajax
                                request to load the tab contents.
                                This feature is useful to reduce bandwidth and speed up page loading time. By default activating a
                                previously loaded dynamic tab does not initiate a request to load the contents again as tab is cached.
                                To control this behavior use cache option.</p>

                            <p>AccordionPanel supports lazy loading of tab content, when dynamic option is set true, only active
                                tab contents will be rendered to the client side and clicking an inactive tab header will do an ajax
                                request to load the tab contents.
                                This feature is useful to reduce bandwidth and speed up page loading time. By default activating a
                                previously loaded dynamic tab does not initiate a request to load the contents again as tab is cached.
                                To control this behavior use cache option.</p>
                        </div>
                    </p:tab>
                    <p:tab title="Second Tab Title">
                        <div style="height:300px">
                            <p>Your listener(if defined) will be invoked with an org.primefaces.event.TabChangeEvent instance
                                that contains a reference to the new active tab and the accordion panel itself.</p>
                            <p>Your listener(if defined) will be invoked with an org.primefaces.event.TabChangeEvent instance
                                that contains a reference to the new active tab and the accordion panel itself.</p>
                            <p>Your listener(if defined) will be invoked with an org.primefaces.event.TabChangeEvent instance
                                that contains a reference to the new active tab and the accordion panel itself.</p>
                            <p>Your listener(if defined) will be invoked with an org.primefaces.event.TabChangeEvent instance
                                that contains a reference to the new active tab and the accordion panel itself.</p>
                            <p>Your listener(if defined) will be invoked with an org.primefaces.event.TabChangeEvent instance
                                that contains a reference to the new active tab and the accordion panel itself.</p>
                            <p>Your listener(if defined) will be invoked with an org.primefaces.event.TabChangeEvent instance
                                that contains a reference to the new active tab and the accordion panel itself.</p>
                            <p>Your listener(if defined) will be invoked with an org.primefaces.event.TabChangeEvent instance
                                that contains a reference to the new active tab and the accordion panel itself.</p>
                            <p>Your listener(if defined) will be invoked with an org.primefaces.event.TabChangeEvent instance
                                that contains a reference to the new active tab and the accordion panel itself.</p>
                            <p>Your listener(if defined) will be invoked with an org.primefaces.event.TabChangeEvent instance
                                that contains a reference to the new active tab and the accordion panel itself.</p>
                            <p>Your listener(if defined) will be invoked with an org.primefaces.event.TabChangeEvent instance
                                that contains a reference to the new active tab and the accordion panel itself.</p>
                            <p>Your listener(if defined) will be invoked with an org.primefaces.event.TabChangeEvent instance
                                that contains a reference to the new active tab and the accordion panel itself.</p>
                            <p>Your listener(if defined) will be invoked with an org.primefaces.event.TabChangeEvent instance
                                that contains a reference to the new active tab and the accordion panel itself.</p>
                            <p>Your listener(if defined) will be invoked with an org.primefaces.event.TabChangeEvent instance
                                that contains a reference to the new active tab and the accordion panel itself.</p>
                            <p>Your listener(if defined) will be invoked with an org.primefaces.event.TabChangeEvent instance
                                that contains a reference to the new active tab and the accordion panel itself.</p>
                            <p>Your listener(if defined) will be invoked with an org.primefaces.event.TabChangeEvent instance
                                that contains a reference to the new active tab and the accordion panel itself.</p>
                            <p>Your listener(if defined) will be invoked with an org.primefaces.event.TabChangeEvent instance
                                that contains a reference to the new active tab and the accordion panel itself.</p>
                            <p>Your listener(if defined) will be invoked with an org.primefaces.event.TabChangeEvent instance
                                that contains a reference to the new active tab and the accordion panel itself.</p>
                            <p>Your listener(if defined) will be invoked with an org.primefaces.event.TabChangeEvent instance
                                that contains a reference to the new active tab and the accordion panel itself.</p>
                            <p>Your listener(if defined) will be invoked with an org.primefaces.event.TabChangeEvent instance
                                that contains a reference to the new active tab and the accordion panel itself.</p>
                            <p>Your listener(if defined) will be invoked with an org.primefaces.event.TabChangeEvent instance
                                that contains a reference to the new active tab and the accordion panel itself.</p>
                            <p>Your listener(if defined) will be invoked with an org.primefaces.event.TabChangeEvent instance
                                that contains a reference to the new active tab and the accordion panel itself.</p>
                            <p>Your listener(if defined) will be invoked with an org.primefaces.event.TabChangeEvent instance
                                that contains a reference to the new active tab and the accordion panel itself.</p>
                            <p>Your listener(if defined) will be invoked with an org.primefaces.event.TabChangeEvent instance
                                that contains a reference to the new active tab and the accordion panel itself.</p>
                            <p>Your listener(if defined) will be invoked with an org.primefaces.event.TabChangeEvent instance
                                that contains a reference to the new active tab and the accordion panel itself.</p>
                        </div>
                    </p:tab>
                    <p:tab title="Third Tab Title">
                        <div style="height:300px">
                            <h:outputText value="Lorem"/>
                        </div>
                    </p:tab>
                </p:accordionPanel>
            </p:tab>

        </p:tabView>

    </ui:define>

</ui:composition>

</html>